<template>
  <div class="app-container">
    <!--<el-row
         :gutter="20"
         type="flex"
         justify="space-between"
         class="bg-white mb10 details-nav mg0"
      >
        <el-col :span="10" class="float-left details-nav-tit">
            <span>表名称：</span>
            <span class="details-nav-tit-text" v-show="!isBasciEdit">{{getDataBeseBasic.tableAlias|| '-'}}</span>
            <el-input v-show="isBasciEdit" placeholder="请输入内容" class="details-nav-tit-setInput" v-model="getDataBeseBasic.tableAlias"></el-input>
            <span class="nav-tit-operation-icon" @click="basciEditHanld">
               <svg aria-hidden="true" class="iconfont-icon">
                  <use xlink:href="#icon-edit"></use>
               </svg>
            </span>
             <span class="nav-tit-operation-icon" @click="basciSaveHanld">
               <svg aria-hidden="true" class="iconfont-icon">
                  <use xlink:href="#icon-edit"></use>
               </svg>
            </span>
            <svg-icon icon-class="edit" class="nav-tit-operation-icon"  @click="basciEditHanld" v-show="!isBasciEdit"/>
            <svg-icon icon-class="save2" class="nav-tit-operation-icon"  @click="basciSaveHanld" v-show="isBasciEdit"/>
            <svg-icon icon-class="exit2" class="nav-tit-operation-icon"   @click="basciExitHanld" v-show="isBasciEdit"/>

            <span class="nav-tit-operation-icon">
               <svg aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
               </svg>
            </span>
         </el-col>
         <el-row :span="5" :gutter="10" class="mg0" type="flex">
            <el-col :span="1.5">
               <el-button
                  type="primary"
                  icon="el-icon-refresh-right"
                  size="mini"
                  @click="handleDelete"
                  v-hasPermi="['system:user:edit']"
                  >刷新</el-button
               >
            </el-col>
            <el-col :span="1.5">
               <el-button
                  type="primary"
                  icon="el-icon-tickets"
                  size="mini"
                  @click="handleApplyPermis"
                  >申请权限</el-button
               >
            </el-col>
            <el-col :span="1.5">
               <el-button
                  type="primary"
                  icon="el-icon-tickets"
                  size="mini"
                  @click="handleQuit"
                  v-hasPermi="['system:user:remove']"
                  >退出</el-button
               >
            </el-col>
         </el-row>
      </el-row>-->

      <div class="mb10">
         <transition name="el-zoom-in-center">
            <div  v-if="showBaseInfo"  class="map-all basis-text app-left-width float-left bg-white app-height" >
               <!---<div class="from-info details-nav-tit">
                           <span>表名称：</span>
                           <span class="details-nav-tit-text" v-show="!isBasciEdit">{{getDataBeseBasic.tableAlias|| '-'}}</span>
                           <el-input v-show="isBasciEdit" placeholder="请输入内容" class="details-nav-tit-setInput" v-model="getDataBeseBasic.tableAlias"></el-input>
                        </div>-->
               <div class="from-info from-info-basis">
                  <!-- <el-popover
                     placement="right"
                     popper-class="tip-from"
                     popper-class="tip-from"
                     <div slot="reference">
                        <p class="title">基础信息</p>
                        <div class="from-info-item">
                           <div class="from-info-item-child">
                              <span  class="item-child-tit">表名称：</span>
                              <span v-show="!isBasciEdit" class="item-child-value">
                                 {{ getDataBeseBasic.tableAlias ||"-"}}
                              </span>
                              <input 
                                 v-show="isBasciEdit" 
                                 v-model="getDataBeseBasic.tableAlias"
                                 placeholder="请输入内容"
                                 class="item-child-input"/>
                           </div>
                           <div class="from-info-item-child">
                              <span
                                 class="item-child-tit"
                              >表单名称(英):</span>
                              <span
                                 id="databaseName2"
                                 class="item-child-value copy-content"
                              >{{
                                 getDataBeseBasic.tableName ||
                                 "-"
                              }}</span>
                              <i
                                 ref="copyContent2"
                                 class="el-icon-document-copy copy-icon"
                                 @click="
                                 copy(
                                    'clipboard2',
                                    'copyContent2',
                                    'databaseName2'
                                 )
                                 "
                              />
                           </div>
                           <div class="from-info-item-child">
                              <span  class="item-child-tit">所属分类:</span>
                              <span class="item-child-value">
                                 {{getDataBeseBasic.dirPath || "-"}}
                              </span>
                           </div>
                           <div class="from-info-item-child">
                              <span class="item-child-tit">表单描述：</span>
                              <span v-show="!isBasciEdit" class="item-child-value">
                                 {{ getDataBeseBasic.comment || "-"}}
                              </span>
                              <input
                                 v-show="isBasciEdit"
                                 v-model="getDataBeseBasic.comment"
                                 class="item-child-input"
                                 type="text">
                           </div>
                           <div class="from-info-item-child">
                              <span  class="item-child-tit">表类型：</span>
                              <span v-show="!isBasciEdit" class="item-child-value" >
                                 {{schemeStatusOption[getDataBeseBasic.schemeStatus] || "-"}}
                              </span>
                              <el-select
                                 v-show="isBasciEdit"
                                 v-model="getDataBeseBasic.schemeStatus"
                                 placeholder="请选择表类型">
                                 <el-option
                                 v-for="key in Object.keys(schemeStatusOption)"
                                 :key="key"
                                 :label="schemeStatusOption[key]"
                                 :value="Number(key)">
                                    {{  schemeStatusOption[key] }}
                                 </el-option>
                              </el-select>
                           </div>
                           <div class="from-info-item-child">
                              <span class="item-child-tit" >表更新周期：</span>
                              <span v-show="!isBasciEdit"  class="item-child-value">
                                 {{schemeCycleOption[getDataBeseBasic.schemeCycle] || "-"}}
                              </span>
                              <el-select  v-show="isBasciEdit" v-model="getDataBeseBasic.schemeCycle" placeholder="请选择表更新周期">
                                 <el-option
                                    v-for="key in Object.keys(schemeCycleOption)"
                                    :key="key"
                                    :label="schemeCycleOption[key]"
                                    :value="Number(key)">
                                       {{ schemeCycleOption[key] }}
                                 </el-option>
                              </el-select>
                           </div>
                        </div>
                     </div>
                     <div class="from-info from-info-permi">
                        <p class="title reference-tit">基础信息</p>
                        <div class="from-info-item">
                           <div class="from-info-item-child">
                              <span  class="item-child-tit">表名称：</span>
                              <span class="item-child-value">
                                 {{getDataBeseBasic.tableAlias || "-"}}
                              </span>
                           </div>
                        </div>
                        <div class="from-info-item">
                           <div class="from-info-item-child">
                              <span class="item-child-tit" >表单名称(英):</span>
                              <span id="databaseName" class="item-child-value" >{{ getDataBeseBasic.tableName ||  "-" }}</span>
                              <i ref="copyContent" class="el-icon-document-copy copy-icon" @click="copy('clipboard','copyContent','databaseName')"/>
                           </div>
                           <div class="from-info-item-child">
                              <span class="item-child-tit">所属分类:</span>
                              <span class="item-child-value">
                                 {{getDataBeseBasic.dirPath || "-"}}
                              </span>
                           </div>
                           <div class="from-info-item-child">
                              <span class="item-child-tit">表单描述：</span>
                              <span class="item-child-value">
                                 {{ getDataBeseBasic.comment || "-"}}
                              </span>
                           </div>
                           <div class="from-info-item-child">
                              <span class="item-child-tit">表类型：</span>
                              <span class="item-child-value">
                                 {{schemeStatusOption[getDataBeseBasic.schemeStatus] || "-"}}
                              </span>
                           </div>
                           <div class="from-info-item-child">
                              <span class="item-child-tit">表更新周期：</span>
                              <span class="item-child-value">
                                 {{schemeCycleOption[getDataBeseBasic.schemeCycle] || "-"}}
                              </span>
                           </div>
                        </div>
                     </div>
                  </el-popover> -->
                   <el-popover
                        placement="right"
                        width="400"
                        popper-class="tip-from"
                    >
                        <div slot="reference">
                            <p class="title reference-tit">基础信息</p>
                            <div class="from-info-item">
                                <div class="from-info-item-child">
                                    <span class="item-child-tit">表名称：</span>
                                    <span
                                        class="item-child-value"
                                        v-show="!isBasciEdit"
                                        >{{
                                            getDataBeseBasic.tableAlias || "-"
                                        }}</span
                                    >
                                    <input
                                        v-show="isBasciEdit"
                                        placeholder="请输入内容"
                                        class="item-child-input"
                                        v-model="getDataBeseBasic.tableAlias"
                                    />
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit"
                                        >表单名称(英):</span
                                    >
                                    <span
                                        class="item-child-value copy-content"
                                        id="databaseName2"
                                        >{{
                                            getDataBeseBasic.tableName || "-"
                                        }}</span
                                    >
                                    <!-- el-icon-document-copy -->
                                    <i
                                        class="el-icon-document-copy copy-icon"
                                        ref="copyContent2"
                                        @click="
                                            copy(
                                                'clipboard2',
                                                'copyContent2',
                                                'databaseName2'
                                            )
                                        "
                                    ></i>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit"
                                        >所属分类:</span
                                    >
                                    <span class="item-child-value">{{
                                        getDataBeseBasic.dirPath || "-"
                                    }}</span>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit"
                                        >表单描述：</span
                                    >
                                    <span
                                        class="item-child-value"
                                        v-show="!isBasciEdit"
                                        >{{
                                            getDataBeseBasic.comment || "-"
                                        }}</span
                                    >
                                    <input
                                        class="item-child-input"
                                        v-model="getDataBeseBasic.comment"
                                        v-show="isBasciEdit"
                                        type="text"
                                    />
                                </div>
                                 <div class="from-info-item-child">
                                 <span  class="item-child-tit">表类型：</span>
                                 <span v-show="!isBasciEdit" class="item-child-value" >
                                    {{schemeStatusOption[getDataBeseBasic.schemeStatus] || "-"}}
                                 </span>
                                 <el-select
                                    v-show="isBasciEdit"
                                    v-model="getDataBeseBasic.schemeStatus"
                                    placeholder="请选择表类型">
                                    <el-option
                                    v-for="key in Object.keys(schemeStatusOption)"
                                    :key="key"
                                    :label="schemeStatusOption[key]"
                                    :value="Number(key)">
                                       {{  schemeStatusOption[key] }}
                                    </el-option>
                                 </el-select>
                              </div>
                              <div class="from-info-item-child">
                                 <span class="item-child-tit" >表更新周期：</span>
                                 <span v-show="!isBasciEdit"  class="item-child-value">
                                    {{schemeCycleOption[getDataBeseBasic.schemeCycle] || "-"}}
                                 </span>
                                 <el-select  v-show="isBasciEdit" v-model="getDataBeseBasic.schemeCycle" placeholder="请选择表更新周期">
                                    <el-option
                                       v-for="key in Object.keys(schemeCycleOption)"
                                       :key="key"
                                       :label="schemeCycleOption[key]"
                                       :value="Number(key)">
                                          {{ schemeCycleOption[key] }}
                                    </el-option>
                                 </el-select>
                              </div>
                            </div>
                        </div>
                        <!---el-popover 显示的内容--->
                        <div>
                            <p class="title reference-tit">基础信息</p>
                            <div class="from-info-item">
                                <div class="from-info-item-child">
                                    <span class="item-child-tit">表名称：</span>
                                    <span class="item-child-value">{{
                                        getDataBeseBasic.tableAlias || "-"
                                    }}</span>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit"
                                        >表单名称(英):</span
                                    >
                                    <span
                                        class="item-child-value"
                                        id="databaseName"
                                        >{{
                                            getDataBeseBasic.tableName || "-"
                                        }}</span
                                    >
                                    <i
                                        class="el-icon-document-copy copy-icon"
                                        ref="copyContent"
                                        @click="
                                            copy(
                                                'clipboard',
                                                'copyContent',
                                                'databaseName'
                                            )
                                        "
                                    ></i>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit"
                                        >所属分类:</span
                                    >
                                    <span class="item-child-value">{{
                                        getDataBeseBasic.dirPath || "-"
                                    }}</span>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit"
                                        >表单描述：</span
                                    >
                                    <span class="item-child-value">{{
                                        getDataBeseBasic.comment || "-"
                                    }}</span>
                                </div>
                                  <div class="from-info-item-child">
                                    <span class="item-child-tit">表类型：</span>
                                    <span class="item-child-value">
                                       {{schemeStatusOption[getDataBeseBasic.schemeStatus] || "-"}}
                                    </span>
                                 </div>
                                 <div class="from-info-item-child">
                                    <span class="item-child-tit">表更新周期：</span>
                                    <span class="item-child-value">
                                       {{schemeCycleOption[getDataBeseBasic.schemeCycle] || "-"}}
                                    </span>
                                 </div>
                            </div>
                        </div>
                    </el-popover>
               </div>
               <!---统计信息-->
               <div class="from-info from-info-statis">
                  <p class="title">统计信息</p>
                  <div class="from-info-item">
                     <div class="from-info-item-child">
                        <span
                        class="item-child-tit"
                        >数据最近更新:</span>
                        <span class="item-child-value">{{
                        getDataBeseBasic.updateTime
                           ? parseTime(
                              new Date(
                              getDataBeseBasic.updateTime
                              )
                           )
                           : "-"
                        }}</span>
                     </div>
                     <div class="from-info-item-child">
                        <span
                        class="item-child-tit"
                        >表单创建时间:</span>
                        <span class="item-child-value">{{
                        getDataBeseBasic.createTime
                           ? parseTime(
                              new Date(
                              getDataBeseBasic.createTime
                              )
                           )
                           : "-"
                        }}</span>
                     </div>
                     <div class="from-info-item-child">
                        <span class="item-child-tit">数据行数: </span>
                        <span class="item-child-value">{{
                        getDataBeseBasic.totalRows + "行" || "-"
                        }}</span>
                     </div>
                     <div class="from-info-item-child">
                        <span class="item-child-tit">字段数量:</span>
                        <span class="item-child-value">{{
                        getDataBeseBasic.totalFields || "-"
                        }}</span>
                     </div>
                     <div class="from-info-item-child">
                        <span class="item-child-tit">文件大小:</span>
                        <span class="item-child-value">{{
                        getDataBeseBasic.storeSize
                           ? (
                              getDataBeseBasic.storeSize /
                              1024 /
                              1024
                           ).toFixed(2) + "Mb"
                           : "-"
                        }}</span>
                     </div>
                  </div>
               </div>
               <!---权限信息-->
               <div class="from-info from-info-permi">
                  <p class="title">权限信息</p>
                  <div class="from-info-item">
                     <div class="from-info-item-child">
                        <span class="item-child-tit">安全等级:</span>
                        <span v-show="!isBasciEdit" class="item-child-value">{{ getDataBeseBasic.safeLevel }}</span>
                        <el-select
                           v-show="isBasciEdit"
                           v-model="getDataBeseBasic.safeLevel"
                           placeholder="请选择安全等级" >
                           <el-option
                              v-for="(item, index) in safeLevelList"
                              :key="index"
                              :label="item.label"
                              :value="item.value"
                           />
                        </el-select>
                     </div>
                     <div class="from-info-item-child">
                        <span class="item-child-tit">我的权限:</span>
                        <span class="item-child-value">
                           {{checkaccessType( getDataBeseBasic.accessType) || "-"}}
                        </span>
                     </div>
                     <div class="from-info-item-child">
                        <span class="item-child-tit">负责部门:</span>
                        <!-- <el-tooltip class="item" effect="dark"
                           :content="getDataBeseBasic.groupName"
                           placement="top-start">
                           <span class="item-child-value">
                           {{getDataBeseBasic.groupName || "-"}}
                           </span>
                        </el-tooltip> -->
                        <span class="item-child-value">{{getDataBeseBasic.groupName || "-"}}</span>
                         <!--  <input class="item-child-input" v-show="isBasciEdit" type="text" v-model="getDataBeseBasic.deptName"/>-->
                        <el-select v-model="getDataBeseBasic.groupName" placeholder="请选择负责部门"  v-show="isBasciEdit" >
                           <el-option  v-for="(item,index) in getDataBeseBasic.list" :key="index" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                     </div>
                     <div class="from-info-item-child">
                        <span class="item-child-tit">负责人:</span>
                        <!-- <el-tooltip class="item" effect="dark"
                           :content="getDataBeseBasic.leaderName"
                           placement="top-start">
                           <span class="item-child-value">
                              {{getDataBeseBasic.leaderName || "-"}}
                           </span>
                        </el-tooltip> -->
                        <span class="item-child-value">{{getDataBeseBasic.leaderName || "-"}}</span>
                        <el-select v-model="getDataBeseBasic.leaderName" placeholder="请选择负责人"  v-show="isBasciEdit" >
                           <el-option  v-for="(item,index) in leaderNameList" :key="index" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                     </div>
                  </div>
               </div>
               <div class="from-info basis-text-btn-list">
                  <el-button
                     plain
                     size="mini"
                     type="primary"
                     icon="el-icon-view"
                     @click="showBseInfo">
                     收起
                  </el-button>
                  <el-button
                     v-show="!isBasciEdit && (getDataBeseBasic.accessType == '3' ||
                        getDataBeseBasic.accessType == '4' ||
                        getDataBeseBasic.accessType == '5')
                     "
                     type="primary"
                     plain
                     size="mini"
                     @click="basciEditHanld">
                     编辑
                  </el-button>
                  <el-button
                     v-show="isBasciEdit"
                     type="primary"
                     plain
                     size="mini"
                     @click="basciSaveHanld">
                     保存
                  </el-button>
                  <el-button
                     v-show="isBasciEdit"
                     size="mini"
                     type="warning"
                     plain
                     @click="basciExitHanld">
                     取消
                  </el-button>
               </div>
            </div>
         </transition>
         <el-row
            :gutter="20"
            type="flex"
            style="margin-right: 340px"
            class="app-height">
            <el-col :span="24" class="map-container bg-white">
               <div class="menu search-item">
                  <el-menu
                     :default-active="activeIndex"
                     class="el-menu-demo"
                     mode="horizontal"
                     @select="handleSelect"
                  >
                     <!-- <el-menu-item index="baseInfo">基础信息</el-menu-item> -->
                     <el-menu-item
                        index="dataView"
                     >数据预览</el-menu-item>
                     <el-menu-item
                        index="metaData"
                     >元数据信息</el-menu-item>
                     <el-menu-item index="blood">血缘关系</el-menu-item>
                     <el-menu-item
                        v-show="getDataBeseBasic.accessType == 5"
                        index="updateRecord"
                     >更新记录
                     </el-menu-item>
                     <el-menu-item
                        v-show="getDataBeseBasic.accessType == 5"
                        index="monitor"
                     >使用监控</el-menu-item>
                  </el-menu>
                  <div class="operation-btn-item">
                     <el-row :span="5" :gutter="10">
                        <el-col :span="1.5">
                        <el-button
                           size="mini"
                           type="primary"
                           @click="showBseInfo"
                        >
                           显示
                        </el-button>
                        </el-col>
                        <el-col :span="1.5">
                        <el-button
                           type="primary"
                           icon="el-icon-refresh-right"
                           size="mini"
                           @click="handleUpdate()"
                        >重置
                        </el-button>
                        </el-col>
                        <el-col :span="1.5">
                        <el-button
                           type="primary"
                           icon="el-icon-tickets"
                           size="mini"
                           @click="handleApplyPermis"
                        >申请权限
                        </el-button>
                        </el-col>
                        <el-col :span="1.5">
                        <el-button
                           size="mini"
                           type="primary"
                           @click="handleQuit"
                        >
                           <!--<svg class="icon" aria-hidden="true">
                                                   <use xlink:href="#icon-tuichus"/>
                                                </svg>
                                                <i class="exit-btn btn-size"></i>-->
                           <i class="iconfont icon-tuichu" />
                           返回
                        </el-button>
                        </el-col>
                     </el-row>
                  </div>
               </div>
               <div>
                  <dataView
                     v-if="activeIndex == 'dataView'"
                     ref="dataView"
                     :access-type="getDataBeseBasic.accessType"/>

                  <metaData
                     v-else-if="activeIndex == 'metaData'"
                     ref="metaData"
                     :is-edit="isEdit"
                     :access-type="getDataBeseBasic.accessType"/>

                  <blood
                     v-else-if="activeIndex == 'blood'"
                     ref="blood"
                     :is-edit="isEdit"/>

                  <updateRecord
                     v-else-if="activeIndex == 'updateRecord'"
                     ref="updateRecord"
                     :is-edit="isEdit"/>

                  <monitor
                     v-else-if="activeIndex == 'monitor'"
                     ref="monitor"/>

               </div>
            </el-col>
         </el-row>
      <!--权限申请---->
         <el-dialog
            title="权限申请"
            :visible.sync="dialogVisiblePermis"
            :destroy-on-close="true"
            width="75%"
            :before-close="handlePermisClose">
            <MapPermis @clonePermis="handlePermisClose"/>
         </el-dialog>
      </div>
   </div>
</template>
<style lang="scss">
@import "~@/assets/styles/utils.scss";
.icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}

.tip-from {
   .title {
      padding: 0 0 10px 0;
      border-bottom: 1px solid #eee;
      margin: 0;
      display: flex;
      align-items: center;

      &::before {
         content: " ";
         display: inline-block;
         width: 4px;
         height: 21px;
         background: #1183f8;
         margin-right: 8px;
      }
   }

   .reference-tit {
      &::before {
         content: " ";
         display: inline-block;
         width: 4px;
         height: 21px;
         background: #fff;
         margin-right: 8px;
      }
   }

   .item-child-tit {
      display: inline-block;
      min-width: 106px;
      max-width: 106px;
   }

   .from-info-item-child {
      display: -webkit-flex; /* Safari */
      display: flex;
      padding: 20px 0 0 0;
      align-items: flex-start;
      .copy-icon {
         cursor: pointer;
         margin-left: 10px;
      }
   }
}

.basis-text .el-select--medium .el-input__inner {
   width: 196px;
}
</style>
<style lang="scss" scoped>
/**
    Element class start
  **/
.el-checkbox__input.is-checked + .el-checkbox__label {
   padding-right: 6px !important;
}

.el-col-5 {
   padding: 0;
}

.el-row {
   margin-right: 0px !important;
   margin-left: 0px !important;
}

.el-menu--horizontal > .el-menu-item {
   height: 46px !important;
   line-height: 46px !important;
}

/**
    Element class end
  **/
.app-container {
   background: #f4f4f4;
   margin: 0 10px 30px 10px;
   padding: 0;
}

.mg0 {
   margin-right: 0px !important;
   margin-left: 0px !important;
}

/***
头部信息和按钮 start
****/
.details-nav {
   overflow: hidden;
   height: 70px;
   line-height: 70px;

   .el-col {
      padding: 0;
   }
}

/***
头部信息和按钮 end
****/
.details-nav-tit {
   margin: 18px 0px 25px 20px;
   height: 36px;
   line-height: 36px;
   padding-bottom: 49px;

   .details-nav-tit-setInput {
      width: 200px;
   }
}

/***基础信息 start**/
.from-info {
   font-size: 14px;
   margin-bottom: 9px;

   &:last-child {
      margin: 0px;
   }

   .title {
      margin: 0 20px 10px 20px;
      // padding: 15px 0;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;

      &::before {
         content: " ";
         display: inline-block;
         width: 4px;
         height: 21px;
         background: #1183f8;
         margin-right: 8px;
      }
   }

   .from-info-item {
      margin: 0 20px;
   }

   .from-info-item-child {
      display: flex;
      // padding: 20px 0 0 0;
      margin-top: 4px;
      line-height: 34px;
      height: 34px;
      overflow: hidden;
      align-items: center;

      .copy-icon {
         cursor: pointer;
      }
   }

   .item-child-tit {
      display: inline-block;
      width: 106px;
   }

   .item-child-value {
      flex: 1;
      // width: 200px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
   }
}

.basis-text-btn-list {
   text-align: center;
   padding: 20px;
   border-top: 1px solid #eee;
   margin: 10px 20px 0 20px !important;
}

.item-child-input {
   width: 200px;
   border: 1px solid #dcdfe6;
   line-height: 30px;
   &:focus {
      outline: none;
   }
}

/***基础信息 end**/

/****
.operation {
   padding-bottom: 10px;
   .el-button--mini {
      height: 34px;
      width: 96px;
   }
   .select-more-handle {
      width: 106px;
   }
}
***/
.map-all {
   min-width: 340px;
   margin-right: 10px;
   padding: 0px !important;
   box-shadow: 0 1px 1px rgb(0 0 0 / 5%), 0 2px 6px 0 rgb(0 0 0 / 5%);
}

.map-container {
   padding: 0px 20px 16px 20px !important;

   .menu {
      position: relative;

      .operation-btn-item {
         position: absolute;
         top: 7px;
         right: 15px;
      }
   }
}
</style>
<script>
import {
  getDataBeseBasic,
  getDateViewList
} from '@/api/dataManagement/system/info'
import { typeList, safeLevelList } from '@/assets/js/fieldTypeList'
import Clipboard from 'clipboard'
import dataView from './details/dataView' //  数据预览表格
import metaData from './details/metaData' // 元数据
import blood from './details/blood' //  血缘关系
import updateRecord from './details/updateRecord' //  更新记录
import monitor from './details/monitor' //  使用监控
import MapPermis from './mapPermis' // 权限弹窗
export default {
   name: 'MapDetails',
   components: { dataView, metaData, blood, updateRecord, monitor, MapPermis },
   data() {
      return {
         // 遮罩层
         loading: true,
         // 选中数组
         ids: [],
         // 非单个禁用
         single: true,
         // 非多个禁用
         multiple: true,
         // 总条数
         total: 0,
         // 预览表格数据
         DataViewList: null,
         // 弹出层标题
         title: '',
         // 表单参数
         form: {},
         getDataBeseBasic: '',
         schemeStatusOption: { 0: '动态', 1: '静态' },
         schemeCycleOption: {
            1: '实时更新',
            2: '每小时更新',
            3: '每日更新',
            4: '每月更新'
         },
         userList: [],
         // 字段类型
         typeList,
         safeLevelList,
         accessType: '',
         // 查询参数
         queryParams: {
            pageNum: 1,
            pageSize: 30,
            userName: undefined,
            phonenumber: undefined,
            status: undefined,
            deptId: undefined
         },
         // 视图模式
         viewModelOptions: [
            { dictLabel: '列表模式', dictValue: 1 },
            { dictLabel: '地图模式', dictValue: 2 }
         ],
         viewModelOptionsValue: '2',
         containerHeight: 0,
         activeIndex: 'dataView',
         isEdit: false,
         isBasciEdit: false,
         tableId: '',
         clipboard: '',
         clipboard2: '',
         mapHeight: undefined,
         showBaseInfo: true,
         dialogVisiblePermis: false,
         leaderNameList:[]
      }
   },
   created() {
      this.containerHeight = window.window.innerHeight - 116
   },
   watch:{
      'getDataBeseBasic.groupName':{
         handler(newName, oldName) {
            if(this.getDataBeseBasic.list){
               this.getDataBeseBasic.list.forEach(item=>{
                  if(item.name == newName){
                     this.leaderNameList =item.children;
                     this.getDataBeseBasic.leaderName =item.children[0].name
                  }
               })
            }
         },
         immediate: true,
         deep: true
      }
   },
   mounted() {
      this.tableId = this.$route.params.tableId
      this.activeIndex = this.$route.query.metaData
         ? this.$route.query.metaData
         : 'dataView'
      this.getbeseBasic()
      // this.getDataViewList()
      this.clipboard = new Clipboard(this.$refs.copyContent, {
         target: function() {
            return document.getElementById('databaseName')
         }
      })
      this.clipboard2 = new Clipboard(this.$refs.copyContent2, {
         target: function() {
            return document.getElementById('databaseName2')
         }
      })
      this.getHeight(true)
   },
   methods: {
      // 隐藏左边信息栏
      showBseInfo() {
         this.showBaseInfo = !this.showBaseInfo
      },
      /**
            * 获取数据方法 start
            * **/
      // 查询用户列表
      getHeight(isPage) {
         var that = this
         var win = window.innerHeight
         var search = document.getElementsByClassName('search-item')[0].clientHeight
         var pageH = isPage ? 31 + 25 : 0
         that.mapHeight = win - search - 165 - pageH
      },
      //  获取表基础信息
      getbeseBasic() {
         getDataBeseBasic({ tableId: this.tableId }).then(res => {
            this.getDataBeseBasic = res.data
         // this.getDataBeseBasic = {...res.data, schemeStatus:"动态", schemeCycle:'实时更新'};
         // console.log("this.getDataBeseBasic:",this.getDataBeseBasic)
         })
      },
      // 数据预览列表
      getDataViewList() {
         this.loading = true
         getDateViewList({ tableId: this.tableId }).then(res => {
         // this.DataViewList = res.data;
            var dataJson = {
               header: [
                  {
                  filedAlias: 'filedAlias',
                  filedName: 'filedName'
                  },
                  {
                  filedAlias: 'filedAlias',
                  filedName: 'filedName'
                  }
               ],
               list: [{}]
            }
         // this.total = res.total;
         // this.loading = false;
         })
      },
      //
      /** **
            * 获取数据方法 end
            * **/

      // 基础信息编辑
      basciEditHanld() {
         this.isBasciEdit = true
      },
      basciExitHanld() {
         this.isBasciEdit = false
         this.getbeseBasic()
      },
      // 基础信息保存
      basciSaveHanld() {
         const {
         comment,
         safeLevel,
         deptName,
         managerName
         } = this.getDataBeseBasic;
         this.getDataBeseBasic.updateTime = this.parseTime(new Date())
         getDataBeseBasic({
            methods: 'post',
            tableId: this.tableId,
            data: this.getDataBeseBasic
            }).then(res => {
               console.log(res)
               if (res.code == 200) {
                  this.$message({
                     message: '编辑成功',
                     type: 'success'
                  })
                  this.getbeseBasic()
                  this.isBasciEdit = false
               }
         })
      },
      checkaccessType(type) {
         var val = ''
         this.typeList.forEach(item => {
            if (item.value == type) {
               val = item.label
            }
         })
         return val
      },

      // 退出按钮
      handleQuit() {
         if (this.$route.query.type == 'change') {
            this.$router.push('/DMS/dataMap/changeRecord')
         } else {
            this.$router.push('/DMS/dataMap/mapDirectory?dirId=' + this.$route.query.dirId)
         }
      },
      handleEdit() {
         this.isEdit = true
      },
      // 申请权限
      handleApplyPermis() {
         sessionStorage.setItem('selectList',JSON.stringify([this.getDataBeseBasic]))
         // this.$router.push("/DMS/dataMap/mapDirectory/mapPermis?tableId="+this.tableId);
         this.dialogVisiblePermis = true
      },
      // 基础信息 表名复制
      copy(val, _ref, id) {
         var that = this
         that[val].on('success', e => {
         // 释放内存
         // this.$message.success('复制成功');
            that.$message({
               message: '复制成功',
               type: 'success'
            })
            that[val].destroy()
         })

         that[val].on('error', () => {
            alert('不支持此浏览器')
            console.log('clipboard')
            // 释放内存
            that[val].destroy()
         })

         that[val] = new Clipboard(that.$refs[_ref], {
            target: function() {
               return document.getElementById(id)
            }
         })
      },
      // 取消按钮
      cancel() {
         this.open = false
         this.reset()
      },
      /** 搜索按钮操作 */
      handleQuery() {
         this.queryParams.page = 1
      },
      /** 重置按钮操作 */
      resetQuery() {
         this.dateRange = []
         this.resetForm('queryForm')
         this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
         this.ids = selection.map(item => item.userId)
         this.single = selection.length != 1
         this.multiple = !selection.length
      },
      /** 点击单行 */
      handleRowClick(row, column, event) {
         this.$router.push('/DMS/dataMap/mapDirectory/details')
      },
      /** 更新按钮操作 */
      handleUpdate(row) {
         console.log(row)
         // handleUpdate
         //   <el-menu-item index="dataView">数据预览</el-menu-item>
         //    <el-menu-item index="metaData">元数据信息</el-menu-item>
         //    <el-menu-item index="blood">血缘关系</el-menu-item>
         //    <el-menu-item index="updateRecord">更新记录</el-menu-item>
         //    <el-menu-item index="monitor">使用监控</el-menu-item>
         if (this.activeIndex == 'dataView') {
            this.$refs.dataView.updataHandle()
         }
         if (this.activeIndex == 'metaData') {
            this.$refs.metaData.updataHandle()
         }
         if (this.activeIndex == 'blood') {
            this.$refs.blood.updataHandle()
         }
         if (this.activeIndex == 'updateRecord') {
            this.$refs.updateRecord.updataHandle()
         }
         if (this.activeIndex == 'monitor') {
            this.$refs.monitor.updataHandle()
         }
      },
      // 表格导航切换
      handleSelect(index, indexPath) {
         /** **
                * monitor 使用监控
                * updateRecord 更新记录
                * blood 血缘关系
                * metaData 元数据信息
                * dataView 数据预览
                * ****/
         if (this.$route.query.metaData) {
         this.$router.push({
            path:
                           '/DMS/dataMap/mapDirectory/details/' +
                           this.$route.params.tableId +
                           '?dirId=' +
                           this.$route.query.dirId
         })
         }
         this.activeIndex = index
      },
      handlePermisClose() {
         this.dialogVisiblePermis = false
         // this.getList();
      }
   }
}
</script>
